import { InlineFilter } from '@/components/InlineFilter';
import { Message, Text, Alert } from '@aws-amplify/ui-react';

The `Authenticator` ships with [translations](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/translations.ts) for:

- `en` – English (default)
- `zh` – Chinese
- `nl` – Dutch
- `fr` – French
- `de` – German
- `he` – Hebrew
- `hu` – Hungarian
- `id` – Indonesian
- `it` – Italian
- `ja` – Japanese
- `ko` – Korean
- `nb` - Norwegian
- `pl` – Polish
- `pt` – Portuguese
- `ru` – Russian
- `es` – Spanish
- `sv` – Swedish
- `th` - Thai
- `tr` – Turkish
- `ua` – Ukrainian

These [translations](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/translations.ts) can be customized using the [Amplify JS' `I18n`](https://docs.amplify.aws/lib/utilities/i18n/q/platform/js/) module:

<Message colorTheme="info" variation="filled">
<Text fontWeight="bold" as="span">Note:</Text> The import path for `i18n` changed from `aws-amplify` to `aws-amplify/utils` in `aws-amplify@6`
</Message>

<InlineFilter filters={['angular']}>
```js
import { I18n } from 'aws-amplify/utils';
import { translations } from '@aws-amplify/ui-angular';
I18n.putVocabularies(translations);
I18n.setLanguage('fr');

I18n.putVocabularies({
  fr: {
    'Sign In': 'Se connecter',
    'Sign Up': "S'inscrire",
  },
  es: {
    'Sign In': 'Registrarse',
    'Sign Up': 'Regístrate',
  },
});
```
</InlineFilter>
<InlineFilter filters={['react']}>
```js
import { I18n } from 'aws-amplify/utils';
import { translations } from '@aws-amplify/ui-react';
I18n.putVocabularies(translations);
I18n.setLanguage('fr');

I18n.putVocabularies({
  fr: {
    'Sign In': 'Se connecter',
    'Sign Up': "S'inscrire",
  },
  es: {
    'Sign In': 'Registrarse',
    'Sign Up': 'Regístrate',
  },
});
```
</InlineFilter>
<InlineFilter filters={['vue']}>
```js
import { I18n } from 'aws-amplify/utils';
import { translations } from '@aws-amplify/ui-vue';
I18n.putVocabularies(translations);
I18n.setLanguage('fr');

I18n.putVocabularies({
  fr: {
    'Sign In': 'Se connecter',
    'Sign Up': "S'inscrire",
  },
  es: {
    'Sign In': 'Registrarse',
    'Sign Up': 'Regístrate',
  },
});
```
</InlineFilter>

<InlineFilter filters={['svelte']}>
```js
import { I18n } from 'aws-amplify/utils';
import { translations } from '@aws-amplify/ui-svelte';
I18n.putVocabularies(translations);
I18n.setLanguage('fr');

I18n.putVocabularies({
  fr: {
    'Sign In': 'Se connecter',
    'Sign Up': "S'inscrire",
  },
  es: {
    'Sign In': 'Registrarse',
    'Sign Up': 'Regístrate',
  },
});
```
</InlineFilter>

The list of available keys are available [here](https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/dictionaries/authenticator/en.ts).

### Confirm Sign Up Page Translations

The confirm sign up page has a few specialized strings that can be translated.
These include:

```js
`Your code is on the way. To log in, enter the code we emailed to`

`Your code is on the way. To log in, enter the code we texted to`

`Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.`

`It may take a minute to arrive.`
```

<Alert role="none" variation="info" heading="Translations Needed 📖">
  If you see any missing translations or would like to contribute a new
  language, we greatly appreciate contributions to translations we have
  [here](https://github.com/aws-amplify/amplify-ui/tree/main/packages/ui/src/i18n/dictionaries).
</Alert>
